<template>
	<view class="all">
		<!-- <button @click="aa">aa</button> -->
		<u-subsection :list="list" :current="current" @change="sectionChange" activeColor="#000" inactiveColor='#fff'
			mode='button' bgColor="#c00000" ></u-subsection>
		<view class="" v-if="orders.length > 0">
			<view class="order-all" v-if="item.goods.length > 0" v-for="(item,index) in orders" :key="item.order_id">
				<view class="icontext">
					<view class="">
						<uni-icons class="uni-icons" color="#c00000" type="shop" size="18"></uni-icons>
						<text class="text">优购</text>
					</view>
					<view class="iconOder" >
						<text style="color: red;">订单总金额:￥{{item.order_price}}</text>
						<text>订单种类:{{item.order_fapiao_title}}</text>
					</view>
				</view>
				<view class="order-goods"  v-for="(itemSon,index) in item.goods" :key="itemSon.goods_id"
					@click="gotoDetail(item)">
					<view class="order-image">
						<image :src="itemSon.goods_small_logo" class="icon"></image>
					</view>
					<view class="order-text">
						<view class="order-goods_name">{{itemSon.goods_name}} </view>
						<view class="order-num">
							<view class="order-meney">￥{{itemSon.goods_price}}</view>
							<text>x{{itemSon.goods_number}}</text>
						</view>
					</view>
				</view>

			</view>

		</view>
		<view class="" v-else>
			<myEmpty mode="order" :IfShowBut='false'></myEmpty>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: ['全部', '未付款', '已付款', '退款'],
				current: 0,
				index: 0,
				orders: [],
			};
		},
		onLoad() {
			uni.$setNavigationBarColor()
			this.init()
		},
		methods: {
			//获取订单列表
			async init() {
				const {
					data: res
				} = await uni.$http.get('/api/public/v1/my/orders/all?number=' + this.index)
				if (res.meta.status !== 200) return uni.$showToast("获取订单失败", "error")
				if (this.index == 2 || this.index == 3) {
					return this.orders = []
				}
				this.orders = res.message.orders
			},
			//切换导航栏
			sectionChange(val) {
				
				  
				this.index = val
				this.init()
				this.current = val

			},
			// aa(){
				//电话
				// wx.makePhoneCall({
				//   phoneNumber: "123456"
				// })
				//震动
				// wx.vibrateShort({
				// 	type:"heavy"
				// })
				// wx.scanCode({
				//   success (res) {
				//     console.log(res)
				//   }
				// })
		
				//获取是否无网络
				// wx.onNetworkStatusChange(function (res) {
				//   console.log(res.isConnected)
				//   console.log(res.networkType)
				// })
				//获取电量
				// wx.getBatteryInfo({
				// 	success(res){
				// 		console.log(res.level)
				// 		console.log(res.isCharging)
				// 	}
				// })
			// 	wx.checkIsOpenAccessibility({
			// 		success(open){
			// 			console.log(open)
			// 		}
			// 	})
			// },
			//跳转详情
			gotoDetail(val) {
				console.log(val,"val")
				uni.navigateTo({
					url: '/subGoodsDetail/order-detail/order-detail?item=' + JSON.stringify(val)
				})
			},
		},

	}
</script>

<style lang="scss">
	.all {
		background-color: #f7f8f8;

		.order-goods {
			display: flex;
			margin-top: 30rpx;

			.order-text {
				padding-left: 20rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				width: 100%;

				.order-goods_name {
					font-size: 24rpx;
				}

				.order-num {
					display: flex;
					justify-content: space-between;

					.order-meney {
						color: #c00000;
					}

					text {
						padding-right: 20rpx;
					}
				}

			}

			.order-image {
				image {
					padding-left: 10rpx;
					width: 100px;
					height: 100px;
				}
			}
		}

		.order-all {
			margin-bottom: 30px;
			background-color: white;

			.icontext {
				display: flex;
				justify-content: space-between;
				padding: 20rpx;
				padding-top: 20rpx;
				padding-bottom: 10rpx;

				.text {
					font-size: 20rpx;
				}

				.iconOder {
					font-size: 28rpx;

					text {
						padding-left: 20rpx;
					}
				}

				.uni-icons {
					vertical-align: middle;
				}
			}

		}



	}
</style>